import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import * as actions from '@actions/comment'
import './index.scss'


@connect(state => state.comment, { ...actions })
export default class ProdComment extends Taro.Component {

    static defaultProps = {
        prodCommData: {}
    }
    state = {
        loaded: false,
        loading: false
    }
    constructor(props) {
        super(props)
        this.prodId = this.props.prodId
    }

    componentDidMount() {
        this.props.dispatchCommentProd({ prodId: this.prodId }).then(res => {
            this.setState({
                loaded: true
            })
        })
    }
    item(item) {
        return (
            <View className="cmt-item" key="prodCommId">
                <View className="cmt-user">
                    <Text className="date">{item.recTime}</Text>
                    <View className="cmt-user-info">
                        <Image className="user-img" src={item.pic} />
                        <View className="nickname">{item.nickName}</View>
                        <van-rate readonly value="{{ item.score }}" change="onChange" color="#f44" />
                    </View>
                </View>
                <View className="cmt-cnt">{item.content}</View>
                {/* <ScrollView className="cmt-attr" scroll-x="true" wx:if="{{item.pics.length}}">
                                    <Image src="{{commPic}}" wx:for='{{item.pics}}' wx:for-item="commPic" wx:key='*this'/>
                                </ScrollView> */}
            </View>
        )
    }
    commentItem(list) {
        const comment = (list || []).map(item => {
            return this.item(item)
        })

        return (
            <View>
                {
                    comment
                }
            </View>
        )
    }
    showComment() {
        Taro.navigateTo({
            url: '/pages/prod_detail/comment/comment-item/index?prodId=' + this.prodId
        })
    }
    render() {
        const { prodCommData } = this.props
        const { loaded } = this.state
        return (
            // <!-- 评价 -->
            <View className='cmt-wrap'>
                {loaded &&
                    <View>
                        <View className="cmt-tit" onClick={() => this.showComment()}>
                            <View className="cmt-t">
                                评价
                                <Text className="cmt-good">好评{prodCommData.positiveRating}%</Text>
                            </View>
                            <View className="cmt-count">
                                共{prodCommData.number}条
                                <Text className="cmt-more"></Text>
                            </View>
                        </View>
                        <View className="cmt-cont">
                            <View className="cmt-tag" bindtap='showComment'>
                                <Text className="text">全部({prodCommData.number})</Text>
                                <Text className="text">好评({prodCommData.praiseNumber})</Text>
                                <Text className="text">中评({prodCommData.secondaryNumber})</Text>
                                <Text className="text">差评({prodCommData.negativeNumber})</Text>
                                <Text className="text">有图({prodCommData.picNumber})</Text>
                            </View>
                            <View className="cmt-items">
                                {
                                    // this.commentItem(prodCommData.slice(0, 2))
                                }
                            </View>
                            {/* <View className="cmt-more-v" wx:if="{{prodCommPage.records.length > 2}}">
                            <Text bindtap='showComment'>查看全部评价</Text>
                        </View> */}
                        </View>
                    </View>
                }
            </View>
        )
    }

}